<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :inline="true" style="position: fixed">
      <el-col class="location" style="margin-left: 370px;margin-top: 5px">
        <el-form-item label="比赛名称">
          <el-input  v-model="form.matchName" class="name"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="location" style="margin-left: 370px;margin-top: 5px">
        <el-form-item label="获得名次">
          <el-input  v-model="form.prizeAwarded" class="name"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="location" style="margin-left: 370px;margin-top: 5px">
        <el-form-item label="加分分数">
          <el-input v-model="form.score" class="name"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="location" style="margin-left: 370px;margin-top: 5px">
        <el-form-item label="加分类型">
          <el-select v-model="form.projectType" placeholder="请选择加分类型" style="width: 300px">
            <el-option label="德育分" value="德育分"></el-option>
            <el-option label="文体分--体育竞赛" value="文体分"></el-option>
            <el-option label="文体分--艺术比赛" value="文体分"></el-option>
            <el-option label="技能分--证书" value="技能分"></el-option>
            <el-option label="技能分--竞赛" value="技能分"></el-option>
            <el-option label="技能分--论文" value="技能分"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <span style="margin-left: 350px;">请上传证明材料图片（只能上传一张,上传格式为jpg,大小<2M）</span>
      <el-col  class="location" style="margin-left: 490px;margin-top: 10px">
        <el-upload
          ref="upload"
          class="avatar-uploader"
          action="/api/uploading/otherBonusUpload/"
          :append-to-body="true"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
          :file-list="fileList"
          :auto-upload="true">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible"
                   :append-to-body="true">
        <img  v-if="imageUrl" width="100%" :src="imageUrl" alt="">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-dialog>
      </el-col >
      <el-col  class="location" style="margin-left: 500px;margin-top: 10px">
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="20px " style="width: 130px"> 提  交 </el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import axios from "_axios@0.26.1@axios";

export default {
  name: "GameUploading",
  data(){
    return{
      // 表单数据
      form:{},
      //图片路径
      imageUrl: '',

      fileList:[],

      dialogVisible: false
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form.matchName,this.form.projectType,this.form.prizeAwarded,this.form.score)
      axios.post('/api/uploading/otherMatchUpload?'+"file="+this.imageUrl+"&&matchName="+this.form.matchName+"&&projectType="+this.form.projectType+"&&prizeAwarded="+this.form.prizeAwarded+"&&score="+this.form.score).then((res)=>{
        if (res.data.resultCode == "200"){
          this.$message.success(res.data.message)
        }else {
          this.$message.error(res.data.message)
        }
      })
    },

    //图片移除和放大
    handleRemove() {
      console.log("图片删除成功");
    },
    handlePictureCardPreview(file) {
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.name {
  width: 300px;
  text-align: center;
}
</style>
